<template>
    <div style="width:100%;height: 700px;position: relative;">
		<div >
        <div class="form-container">
            <div class="image-container">
                <el-upload
                    class="upload-demo"
                    drag
                    :auto-upload="false"
                    list-type="picture"
                    :show-file-list="true"
                    :file-list="fileList"
                    :limit="1"
                    @change="onChangeFile"
                    ref="uploadRef"
                >
                    <h3>新上传的图片</h3>
                    <img v-if="imgUrl" :src="imgUrl" class="avatar"/>
                    <div class="el-upload__text">
                        拖入或者 <em>点击上传</em>
                    </div>
                </el-upload>
            </div>
            <el-form :model="data.user" :rules="rules" ref="formRef" label-width="120px">
                <el-form-item label="用户姓名" prop="uname">
                    <el-input v-model="data.user.uname"></el-input>
                </el-form-item>
                <el-form-item label="用户手机号"  prop="phone">
                    <el-input v-model="data.user.phone" type="number" placeholder="0"></el-input>
                </el-form-item>
				<el-form-item label="用户密码"  prop="phone">
				    <el-input v-model="data.user.pwd" type="password" placeholder="0"></el-input>
				</el-form-item>
                <el-form-item label="用户性别" prop="sex">
				<el-radio-group v-model="data.user.sex">
				        <el-radio value="1">男生</el-radio>
				        <el-radio value="0">女生</el-radio>
				 </el-radio-group>
				</el-form-item>
                <el-form-item label="用户地址" prop="addr">
                    <el-input
                        v-model="data.user.addr"
                        style="width: 240px"
                        :rows="2"
                        type="textarea"
                        placeholder="请输入地址精致到门牌号"
                    />
                </el-form-item>
				<el-form-item>
				<el-button type="primary" @click="add()">注册</el-button>
				</el-form-item>
            </el-form>
        </div>
		</div>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue';
import { $get, $postf } from "../ajax/index.js"
import myalert from "../utils/myalert.js"
import store from "../store/index.js"
import router from "../router/index.js"
import { useRoute, useRouter } from 'vue-router'
import { Plus } from '@element-plus/icons-vue'
import type { UploadProps } from 'element-plus'
import type { ComponentSize, FormInstance, FormRules,ElMessage } from 'element-plus'
const imgUrl=ref('');
const fileList=ref([]);
const formData = new FormData();
const data = reactive({
    user: { uid: 0, uname: '' },//注册的信息
	pic:null,//添加的头像
})
onMounted(()=>{
	
})

//图片上传
	function onChangeFile(file, fileList){
		console.log("file=" + file.value)
		console.log("fileList=" + fileList)
		if (fileList.length > 0) {
			//fileList[0].raw; 文件内容
			imgUrl.value = URL.createObjectURL(fileList[0].raw)

			data.pic=fileList[0].raw;
			console.log(data.pic);
		}
	}

function add(){
	console.log(data.user);
	console.log(imgUrl.value);
	formData.append("uid", data.user.uid)
	formData.append("uname",data.user.uname)
	formData.append("phone", data.user.phone)
	formData.append("pwd",data.user.pwd)
	formData.append("sex", data.user.sex)
	formData.append("addr",data.user.addr)
	formData.append("pic",data.user.pic)
	formData.append('pid',data.pic)
	
	$postf("/api/public/addseller",formData)
	.then(()=>{
	router.push("/login");
	ElMessage({
		message: "注册成功!!!",
		type: 'success',
	})
	})
}
</script>

<style scoped>
.form-container {
    position: absolute;
    top: 20%;
    right: 25%;
}

.image-container {
    width: 25vw;
    display: flex;
    flex-direction: column;
    align-items: center;
	
}
</style>    